<template>
	<view class="collect">
		<view class="screenCondition dFlex jAround_aCenter">
			<view :class="['conditionOne',type == '1'?'actScreen':'']" @click='type = "1";list = [];initCollect(1)'>
				<text>商品</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
			<view :class="['conditionOne',type == '2'?'actScreen':'']" @click='type = "2";list = [];initCollect(1)'>
				<text>知享</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="shopList" v-if='type == "1" && list.length'>
			<view class="shopOne dFlex jStart_aCenter" v-for="(item,index) in list" :key='index' @click='lookShopDetail(item.product.id)'>
				<view class="shop dFlex jStart_aStart">
					<view class="shopImg imgPublic">
						<image :src="item.product.main_img" mode="widthFix"></image>
					</view>
					<view class="shopInfo">
						<view class="shopName">{{item.product.title}}</view>
						<view class='config'>测试测试</view>
						<view class="price dFlex jBetween_aCenter">
							<view class="showPrice">￥{{item.product.price}}</view>
							<view class="collectIcon imgPublic" @click.stop="changeCollect(item.product.id,1,index)">
								<image src="../static/images/collect2.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 知享 -->
		<view class="list" v-else-if='type == "2" && list.length'>
			<view class="shareOne" v-for="(item,index) in list" :key='index' @click='lookShareDetail(item.product.id)'>
				<!-- <view class="vidContent" v-if='item.product.video'>
					<video :src="item.product.video" controls style="width: 100%;"></video>
				</view> -->
				<view class="imgContent imgPublic" :src="item.product.main_img">
					<image :src="item.product.main_img" mode="widthFix"></image>
				</view>
				<view class="desc">
					<view class="actTit dFlex jBetween_aCenter">
						<view class="tit">{{item.product.title}}</view>
						<view class="tools dFlex jEnd_aCenter">
							<view class="toolOne dFlex jCenter_aCenter">
								<view class="toolIcon imgPublic">
									<image src="../static/images/look.png" mode="widthFix"></image>
								</view>
								<text>{{item.product.play_num}}</text>
							</view>
							<view class="toolOne dFlex jCenter_aCenter" @click.stop="changeCollect(item.product.id,2,index)">
								<view class="toolIcon imgPublic">
									<image src="../static/images/collect2.png" mode="widthFix"></image>
								</view>
								<text>{{item.product.like_num}}</text>
							</view>
						</view>
					</view>
					<view class="author">作者：{{item.product.author?item.product.author:'-'}} {{item.product.create_time?item.product.create_time:'未知'}}</view>
					<view class="article">{{item.product.intro?item.product.intro:'暂无相关介绍'}}</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
	</view>
</template>

<script>
	import {
		collectedGoodsList,collectGoods
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				list:[],
				load:false,
				type:'1',//1商品 2知享
				page:1,
				pageSize:10,
			};
		},
		onLoad(){
			this.initCollect();
		}, 
		onReachBottom(){
			if(this.load){
				this.load = false;
				this.page ++;
				this.initCollect();
			}
		},
		methods: {
			// 收藏列表
			async initCollect(page){
				this.page = page ? page : this.page;
				let res = await collectedGoodsList({
					type:this.type,
					page:this.page,
					pageSize:this.pageSize,
				});
				if(res){
					this.list = this.page == 1 ? res : this.list.concat(res);
					this.load = res.length >= 10 ? true : false;
				}
			},
			// 修改收藏状态
			async changeCollect(id,type,idx){
				let res = await collectGoods({
					id:id,
					type:type,
				});
				if(res){
					this.list.splice(idx,1);
				}
			},
			// 查看知享详情
			lookShareDetail(id){
				uni.navigateTo({
					url:"/knowledge/shareDetail?id="+id,
				})
			},
			// 查看商品详情
			lookShopDetail(id){
				uni.navigateTo({
					url:"/index/shopDetail?id="+id,
				})
			},
		},
	}
</script>

<style lang="scss">
	.collect{
		width:100%;
		padding:12px;
		box-sizing: border-box;
		.list{
			width:100%;
			.shareOne{
				width:100%;
				margin-bottom: 10px;
				.desc{
					width:100%;
					padding: 12px;
					box-sizing: border-box;
					border-bottom-left-radius: 5px;
					border-bottom-right-radius: 5px;
					background:white;
					.author{
						font-size: 12px;
						color:#808080;
						margin: 6px 0;
					}
					.article{
						width:100%;
						font-size: 12px;
						color:#808080;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
					.actTit{
						width:100%;
						.tit{
							font-size: 15px;
							font-weight: bold;
						}
						.tools{
							width: max-content;
							font-size: 10px;
							.toolOne{
								width: max-content;
								margin-left: 8px;
							}
							.toolIcon{
								width: 15px;
								height: 15px;
								margin-right: 5px;
							}
						}
					}
				}
			}
		}
		.shopList{
			width:100%;
			padding:0 10px;
			background:white;
			border-radius: 8px;
			box-sizing: border-box;
			.shopOne{
				width:100%;
				padding: 14px 0;
				border-bottom: 1px solid #E6E6E6;
				.shop{
					// width:calc(100% - 25px);
					width:100%;
					.shopInfo{
						width:calc(100% - 95px);
						.price{
							width:100%;
							.showPrice{
								color:#FF0606;
							}
							.collectIcon{
								width: 18px;
								height: 18px;
							}
						}
						.config{
							width:100%;
							font-size:12px;
							margin:5px auto 10px;
							color:#808080;
							visibility: hidden;
						}
						.shopName{
							width:100%;
							// overflow:hidden;
							// text-overflow: ellipsis;
							// white-space:nowrap;
							font-size:16px;
							font-weight:bold;
						}
					}
					.shopImg{
						width: 85px;
						max-height: 85px;
						margin-right:10px;
						image{
							border-radius: 4px;
						}
					}
				}
				// .shopChoose{
				// 	width: 15px;
				// 	height: 15px;
				// 	margin-right: 10px;
				// }
			}
			.shopOne:last-child{
				border: none;
			}
		}
		.screenCondition{
			padding-top: 0;
			margin-bottom: 12px;
		}
	}
</style>
